[#ftl]
[@define "agile.chart.Semicircle"  "agile._Component,agile._Resizable" ]		
widgetName:"Semicircle"
[#assign templateString][#compress] 		
	<div class='agileComponent agileSemicircle'>
	<div style="position:absolute;width:50%;height:100%;border:thin solid #808080;left:0px;top:0px;border-radius:100% 0px 0px 0px/100% 0px 100% 0px;border:thin solid #696969;border-right:0px" ></div>
	<div style="position:absolute;width:50%;height:100%;border:thin solid #808080;left:50%;top:0px;border-radius:0px 100% 0px 0px/0px 100% 0px 0px;border:thin solid #696969;border-left:0px" ></div>
	</div>
[/#compress][/#assign]
,templateString:"${templateString?js_string}"	
,resizeAxis:"xy"
,templateMap:{
	dojo:"<div {id} {html-style} {html-parameters}>{innerWidets}</div>"
	,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
}	
,attributes:agile.delegate(agile._Component.prototype.attributes,{
	"x-radius":lang.mixin({},agile.NumberMetadata,{
		onValueChange:function(widget,name,value){				
			widget.metadata("style.width",value);
		}
	})
	,"y-radius":lang.mixin({},agile.NumberMetadata,{
		onValueChange:function(widget,name,value){				
			widget.metadata("style.height",value);
		}
	})
})	
,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
	"border-radius":lang.mixin({},agile.MetadataConstraint,{ignore:function(ownerWidget,sourceType){ return this._ignore || sourceType == "agile";}})
})
,initDefaultMetadata:function(){
//		this.metadata("parameters.radius",50);
	this.metadata("style.width","200px");
	this.metadata("style.height","100px");
//		this.metadata("style.border-radius","50% 50% 50% 50%/50% 50% 50% 50%");
//		this.metadata("style.border","thin solid #808080");
//		console.log("initDefaultMetadata################Semicircle#############")
}
,init:function(){
//		console.log("init################Semicircle#############")   
	}
	
	,getResizableTargetContainer:function(){				
		return this.domNode;		 
	}
[/@]
